<template>
<view>
    <view class="form_list_bg">
        <text class="form_list_title">详情页</text>
        <image  style="width: 100%;height: 167rpx;" src="https://image1.sansancloud.com/linwenlaoshi/2020_9/9/17/42/39_192.jpg"></image>
    </view>
    <scroll-view scroll-y class="leftScrollType">
        <!-- @scrolltolower="onReachBottom2"  -->
        <view class="material_library_detail_left" :style="'background:'+(curProIndex==index?'#f7f3ec':'#fff')" @tap="selectProItemFun(item,index)" v-for="(item,index) in newTypeList" :key="index">
            <view class="material_library_detail_left_text" :style="'border-left:'+(curProIndex==index?'6rpx solid #be9a60':'')">{{item.typeName}}</view>
            <!-- <view class="active" v-if="curProIndex==index" :style="'background: '+defaultColor"></view> -->
        </view>
    </scroll-view>
    <view scroll-y class="RightProductContainer">
        <view class="material_library_detail_item_three" v-for="(item,index) in tabData" :key="index" :data-id="item.id" @tap="toNewsDetail">
            <view class="material_library_detail_item_text">{{item.title}}</view>
            <image class="material_library_detail_item_img" mode="widthFix" :src="item.imagePath+'?x-oss-process=style/preview'"></image>
        </view>
    </view>
</view>
</template>

<script>

export default {
  data() {
    return {
      /* seeting */
      setting: null,
      userData: null,
      PaiXuPartials: null,
      loginUser: null,
      showState: null,
      tabData: [],
      componentData: {},
      sysWidth: 320,
      newTypeList:[],
      listPage: {
        page: 1,
        pageSize: 0,
        totalSize: 0,
        curpage: 1
      },
      curProData:null,
      curProIndex:0,
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    console.log("======options=====", options);
    this.getNewsTypeData(options,'init')
    this.opt = options;

    if (options.pageNage) {
      wx.setNavigationBarTitle({
        title: options.pageNage
      });
    }

    this.setData({
      setting: getApp().globalData.setting,
      sysWidth: getApp().globalData.sysWidth
    });
    console.log(this.sysWidth);
  },
  onReady: function () {
    var that = this;
    let componentData = this.componentData;
  },
  onShow: function () {
    this.setData({
      loginUser: getApp().globalData.loginUser
    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    let that=this;
    that.listPage.page=1
    that.getNewsData(that.opt)
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var that = this;
    console.log("==onReachBottom==",)
    if (that.listPage.totalSize > that.listPage.curPage * that.listPage.pageSize) {
      that.listPage.page++;
      that.getNewsData(that.opt);
    }
  },
  methods: {
    selectProItemFun:function(item,index){
       let that=this;
       console.log("===selectProItemFun==",item)
       that.curProData=item;
       that.curProIndex=index;
       that.$set(that.opt,'newsTypeId',item.id)
       that.getNewsData(that.opt)
    },
    bindTab: function (e) {
      let that = this;
      let url = e.currentTarget.dataset.url;
      let componentData = this.componentData;
      tab.bindTap(url, that, json2Form, app, componentData);
    },
    toNewsDetail: function (e) {
      let id = e.currentTarget.dataset.id;
      let url='news_detail.html?id=' + id
       getApp().globalData.linkEvent(url)
    },

    /*  */
    getCusPage: function () {
      var customIndex = getApp().globalData.AddClientUrl("/custom_page_news.html");
      var that = this; //拿custom_page

      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log(res.data);
          that.setData({
            userData: res.data
          });

          if (!!res.data.partials && res.data.partials.length > 0) {
            that.getPartials();
          }
        },
        fail: function (res) {
          //app.loadFail()
          that.setData({
            PaiXuPartials: []
          });
        }
      });
    },

    /* 格式化数据 */
    getPartials: function () {
      var that = this;
      var partials = this.userData.partials;
      var PaiXuPartials = []; //排序

      for (let i = 0; i < partials.length; i++) {
        if (typeof partials[i].jsonData == "string") {
          partials[i].jsonData = JSON.parse(partials[i].jsonData);
        }

        if (partials[i].partialType == 13) {
          let componentData = that.componentData;
          tab.tab(that, partials[i], json2Form, app, componentData);
        }

        if (partials[i].partialType == 12) {
          wx.setNavigationBarTitle({
            title: partials[i].jsonData.title
          });

          if (!partials[i].jsonData.titleColor) {
            partials[i].jsonData.titleColor = '#000000';
          }

          if (!partials[i].jsonData.bgColor) {
            partials[i].jsonData.bgColor = '#ffffff';
          }

          wx.setNavigationBarColor({
            frontColor: partials[i].jsonData.titleColor,
            backgroundColor: partials[i].jsonData.bgColor
          });
        } else {
          PaiXuPartials.push(partials[i]);
        }
      }

      this.setData({
        PaiXuPartials: PaiXuPartials
      });
      console.log(this.PaiXuPartials);
    },

    /* 获取新闻列表数据 */
    getNewsData: function (param, ifAdd) {
      console.log("param", param);
      var that = this;

      if (!param) {
        param = {};
      }

      param.page = that.listPage.page;
      let cusUrl = getApp().globalData.AddClientUrl('/more_news_bbs_list.html', param);
      wx.request({
        url: cusUrl.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log(res);
          that.listPage.pageSize = res.data.pageSize;
          that.listPage.curPage = res.data.curPage;
          that.listPage.totalSize = res.data.totalSize;
          let tabData = [];

          if (param.page>1) {
            tabData = that.tabData;
          }
          if (res.data.result.length == 0&&param.page==1) {
            that.setData({
              tabData: null
            });
          } else {
            tabData = tabData.concat(res.data.result);
            that.setData({
              tabData: tabData
            });
          }
        },
        fail: function (res) {}
      });
    },
    /* 获取新闻列表数据 */
    getNewsTypeData: function (param,type) {
      console.log("===getNewsTypeData===", param,type);
      var that = this;
    
      if (!param) {
        param = {};
      }
      param=Object.assign(param,{},{groupName:'linwenlaoshi'})
      param.page = that.listPage.page;
      let cusUrl = getApp().globalData.AddClientUrl('/find_news_types_by_group_name.html', param);
      wx.request({
        url: cusUrl.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log("===getNewsTypeData==",res);
          that.newTypeList=res.data.relateObj.reverse();
          param.newsTypeId=that.newTypeList[0].id
          that.getNewsData(param);
        },
        fail: function (res) {}
      });
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>